import React from 'react'
import { Route, Routes } from 'react-router-dom'

const renderRoutes = (routes) => {

  if (!routes) {
    return null
  }
  return (
    <Routes>
      {
        routes.map((route) => (
          <Route
            key={route.path}
            path={route.path}
            exact={route.exact}
            element={<route.component child={route.children} ></route.component>}
            // v5
            // render={(props) => (
            //   route.render
            //     ? route.render({...props, route})
            //     : <route.component {...props} route={route} />
            // )}
          >
            {
              route.children ? childRouterRender(route.children) : null
            }
          </Route>
        ))
      }
    </Routes>
  )
}

const childRouterRender = (children) => (
  children.map((child) =>
    // console.log(child, 1)
    (
      <Route
        key={child.path}
        path={child.path}
        exact={child.exact}
        element={<child.component />}
      >
        {
          child.children ? childRouterRender(child.children) : null
        }
      </Route>
    ),
  )
)

export default renderRoutes
